<template>
  <div class="" style="height: 600px;">
    <span>{{this.data.length}}</span>
    <scroll class="wrapper"
          ref="scroll"
          :mouse-wheel="true"
          :pull-up-load="pullUpLoad"
          :scrollbar="true"
          @pullingUp="pullingUp"
          >
      <ul class="content">
        <li v-for="(item, index) in data" :key="index">{{item}}</li>
      </ul>
    </scroll>
  </div>
</template>

<script>
import Scroll from '../scroll/Scroll'

export default {
  name: "test",
  title: "测试页面",
  data() {
     return {
       index: 0,
       data: [],
       pulldown: true,
       pullUpLoad: {
         txt: {
           more: '加载更多',
           noMore: '没有了'
         }
       }
     }
   },
   created() {
     this.loadData()
   },
   methods: {
     loadData() {
       setTimeout(() => {
         for (var i = 0; i < 20; i++) {
           this.data.push('测试啊哈')
         }
         this.$refs.scroll.forceUpdate(true)
       }, 1000)
     },
     pullingUp () {
       if (this.index === 2) {
         this.$refs.scroll.forceUpdate(false)
         return
       }
       this.index += 1
       //
       setTimeout(() => {
         for (var i = 0; i < 20; i++) {
           this.data.push('测试啊哈')
         }
         this.$refs.scroll.forceUpdate(true)
       }, 1000)
     },
   },
   components: {
     Scroll
   }
}
</script>

<style lang="less">
</style>
